<template>
  <!-- fixed 固定位置，并通过 bottom-xx right-xx 设置在右下角 -->
  <div
    v-show="showScrollToTopBtn"
    @click="scrollToTop"
    class="border cursor-pointer fixed bottom-2 right-2 md:bottom-10 md:right-10 inline p-3 bg-white hover:bg-gray-100 rounded"
  >
    <svg
      class="w-4 h-4 text-gray-500 dark:text-white"
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 10 14"
    >
      <path
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M5 13V1m0 0L1 5m4-4 4 4"
      ></path>
    </svg>
  </div>
</template>

<script setup>
  import { ref, onMounted, onBeforeUnmount } from "vue";

  // 是否展示返回顶部按钮
  const showScrollToTopBtn = ref(false);

  // 添加滚动监听
  onMounted(() => window.addEventListener("scroll", handleScroll));

  // 移除滚动监听
  onBeforeUnmount(() => window.removeEventListener("scroll", handleScroll));

  const handleScroll = () => {
    // 如果页面滚动超过300px，显示回到顶部按钮，否则隐藏
    showScrollToTopBtn.value = window.scrollY > 300;
  };

  // 滚动到顶部
  const scrollToTop = () => {
    window.scrollTo({
      top: 0, // 距离顶部位置
      behavior: "smooth" // 平滑滚动效果
    });
  };
</script>

<!-- 解释一下上述代码：

onMounted 和 onBeforeUnmount 钩子：
    onMounted 钩子在组件被挂载后执行，这里用于添加滚动监听器
    ，当页面滚动时触发handleScroll函数。
    onBeforeUnmount 钩子在组件被销毁前执行，这里用于移除滚动监听器，以防止内存泄漏。
handleScroll 函数：
    handleScroll 函数是滚动事件的处理函数。
    当用户滚动页面时，该函数被触发。
    如果页面滚动的垂直距离（window.scrollY）超过 300px，设置showScrollToTopBtn为true，显示返回顶部按钮，
    否则设置为false，隐藏按钮。
scrollToTop 函数：
    scrollToTop 函数用于将页面平滑滚动到顶部。
    它使用 window.scrollTo() 方法，
    将页面滚动到距离顶部位置为0的地方，并使用behavior: 'smooth'参数实现平滑滚动效果。
 -->
